<template>
  <div class="boxs">
    <el-dialog
      :model-value="addExptDialogVisible"
      title="新建实验"
      width="1000"
      :before-close="handleCloseAddExpt"
      class="addExptDialog"
    >
      <div class="content">
        <el-form
          ref="addExptFormRef"
          :model="addExptForm"
          :rules="addExptRules"
          class="demo-ruleForm"
          status-icon
          label-width="auto"
        >
          <el-form-item label="实验名称" prop="exptName">
            <el-input
              placeholder="请输入实验名称"
              v-model="addExptForm.exptName"
              :minlength="0"
              :maxlength="30"
              show-word-limit
              clearable
            />
          </el-form-item>
          <el-form-item label="实验目的" prop="exptPurpose">
            <el-input
              placeholder="请输入实验目的"
              v-model="addExptForm.exptPurpose"
              :minlength="0"
              :maxlength="30"
              show-word-limit
              clearable
            />
          </el-form-item>
          <el-form-item label="实验级别" prop="exptLevel">
            <el-select
              allow-create
              clearable
              filterable
              v-model="addExptForm.exptLevel"
              placeholder="请选择实验级别"
              @change="selectExptLevel"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in exptLevelList"
                :key="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="实验工作内容" prop="jobContent">
            <!-- <el-checkbox-group v-model="addExptForm.jobContent">
              <el-checkbox
                :value="item.id"
                :name="item.name"
                :label="item.name"
                v-for="item in currentJobContent"
              >
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group> -->
            <div
              v-for="(item, index) in addExptForm.jobContent"
              class="jobContent"
              :key="index"
            >
              <!-- {{ item.name }} -->
              <!-- {{ item }} -->
              {{ getContentName(item) }}
            </div>
          </el-form-item>
          <!-- <el-form-item label="实验阶段时间" prop="stageTime">
            <el-table
              :data="addExptForm.stageTime"
              style="width: 100%"
              :header-cell-style="{
                backgroundColor: '#575757',
                color: '#ffffff',
                textAlign: 'center',
              }"
              :cell-style="{
                color: '#fff',

                textAlign: 'center',
              }"
              :row-style="{
                color: '#fff',

                textAlign: 'center',
              }"
              max-height="360"
            >
              <el-table-column prop="stage" label="实验阶段" />
              <el-table-column prop="duration" label="阶段工作时长（天）">
                <template #default="{ row }">
                  <div class="duration">
                    <el-input-number
                      placeholder="阶段工作时长"
                      v-model="row.duration"
                      size="small"
                      :min="0"
                    />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item> -->
          <el-form-item label="实验负责人" prop="responsiblePerson">
            <el-select
              v-model="addExptForm.responsiblePerson"
              placeholder="请选择实验负责人"
              clearable
              filterable
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in responsiblePersonList"
                :key="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="实验描述" prop="exptDescribe">
            <el-input
              v-model="addExptForm.exptDescribe"
              :minlength="0"
              :maxlength="100"
              show-word-limit
              type="textarea"
              :rows="5"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCloseAddExpt(addExptFormRef)"
            >取消</el-button
          >
          <el-button type="primary" @click="addExpt(addExptFormRef)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
import { addExptAPI,  } from "@/api/exptManage";
import { getUserListAPI } from "@/api/powerManage";
const props = defineProps({
  addExptDialogVisible: {
    type: Boolean,
    default: false,
  },
  addExptForm: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

let emit = defineEmits(["update:addExptDialogVisible", "addExptSave"]);

// 新建实验
const addExptFormRef = ref(null);
// const addExptForm = ref({});
const addExptRules = {
  exptName: [
    { required: true, message: "请输入实验名称", trigger: "blur" },
    { min: 0, max: 30, message: "实验名称限制0-30个字", trigger: "blur" },
  ],
  exptPurpose: [
    { required: true, message: "请输入实验目的", trigger: "blur" },
    { min: 0, max: 30, message: "实验名称限制0-30个字", trigger: "blur" },
  ],
  exptLevel: [{ required: true, message: "请选择实验级别", trigger: "change" }],
  responsiblePerson: [
    {
      required: true,
      message: "请选择实验负责人",
      trigger: "change",
    },
  ],
  jobContent: [
    {
      type: "array",
      required: true,
      message: "请选择实验工作内容",
      trigger: "change",
    },
  ],
  stageTime: [
    {
      type: "array",
      required: true,
      message: "请设置实验阶段时间",
      trigger: "change",
    },
  ],

  exptDescribe: [
    { required: true, message: "请输入实验描述", trigger: "blur" },
  ],
};

const handleCloseAddExpt = (formEl) => {
  emit("update:addExptDialogVisible", false);

  addExptFormRef.value.resetFields();
};
// 负责人

const responsiblePersonList = ref([
  {
    name: "张三",
    id: 1,
  },
  {
    name: "李四",
    id: 2,
  },
  {
    name: "王五",
    id: 3,
  },
]);
// 获取负责人

async function getuserList() {
  try {
    let res = await getUserListAPI();
    console.log(res,'用户列表');
    responsiblePersonList.value = res.data;

  } catch (error) {
    console.log(error);
  }
}
// 实验级别
const exptLevelList = ref([
  {
    name: "战略级",
    id: 0,
    jobContent: [1, 2, 3, 4, 5, 6, 7, 8],
  },
  {
    name: "战役级",
    id: 1,
    jobContent: [1, 2, 3, 4, 6, 8],
  },
  {
    name: "战术级",
    id: 2,
    jobContent: [1, 3, 5, 7, 8],
  },
]);

// 工作内容
const jobContent = [
  {
    name: "场景编辑",
    id: 1,
  },
  {
    name: "作战筹划",
    id: 2,
  },
  {
    name: "战术规划",
    id: 3,
  },
  {
    name: "联合作战推演",
    id: 4,
  },
  {
    name: "仿真推演",
    id: 5,
  },
  {
    name: "联合作战指挥",
    id: 6,
  },
  {
    name: "单兵指挥",
    id: 7,
  },
  {
    name: "作战评估分析",
    id: 8,
  },
];
const currentJobContent = ref([]);
const selectExptLevel = (e) => {
  let ids = exptLevelList.value[e].jobContent;

  currentJobContent.value = jobContent.filter((v) => ids.includes(v.id));

  props.addExptForm.jobContent = ids;
  props.addExptForm.stageTime = [];
  currentJobContent.value.forEach((v) => {
    props.addExptForm.stageTime.push({
      stage: v.name + "阶段",
      duration: 0,
      //   startTime: "",
      //   endTime: "",
    });
  });
};

function getContentName(id) {
  let item = jobContent.filter((v) => v.id == id);
  if (item && item.length) return item[0].name;
}

const addExpt = async (formEl) => {
  if (!formEl) return;

  await formEl.validate((valid, fields) => {
    if (valid) {
      // props.addExptForm
      emit("addExptSave");
      handleCloseAddExpt();
    } else {
    }
  });
};
onMounted(() => {
  getuserList();
});
</script>
<style lang="scss">
.boxs {
  .addExptDialog {
    margin-top: 20px;
    background: #454545;
    padding: 0;
    .el-dialog__header {
      background: #777777;
      // padding: 0;
      text-align: center;
      height: 40px;
      .el-dialog__title {
        display: inline-block;
        height: 100%;
        height: 40px;
        line-height: 40px;
        color: #fff;
        font-size: 18px;
      }
    }
    .el-dialog__close{
      color: #fff ;
    }
    .content {
      padding: 20px 0 0 0;
      .el-input-number__decrease,
      .el-input-number__increase {
        background: transparent;
        color: #fff;
      }

      .demo-ruleForm {
        width: 80%;
        margin: 0 auto;
        .jobContent {
          margin-left: 10px;
          color: #fff;
        }

        .el-textarea__inner {
          background-color: #424242 !important;
          color: #fff;
        }
        // 表单
        .el-input {
          .el-input__wrapper {
            background-color: #424242 !important;
            .el-input__inner {
              color: #fff;
            }
            .el-input__count-inner {
              background: transparent;
              color: #fff;
            }
          }
        }

        .el-select {
          .el-select__wrapper {
            background-color: #424242;

            .el-select__selected-item {
              color: #fff !important;
            }
            .is-transparent {
              color: #9eaba7 !important;
            }
          }
        }
        .el-form-item__label {
          color: #fff;
        }
      }
    }
  }

  // 表格
  .el-table__expand-icon > .el-icon {
    display: none !important;
  }
  .el-loading-mask {
    background: transparent;
  }

  .el-table__header .cell {
    padding: 0 !important;
    text-overflow: unset !important;
    white-space: nowrap !important;
  }

  .cell:empty::after {
    content: "--" !important;
  }

  .el-table {
    border: none;
    --el-table-border-color: 0;

    font-size: 12px;

    // height: 94% !important;
  }

  .el-table--fit {
    background: transparent;
  }

  .el-table__inner-wrapper {
    // border: none;
  }

  .el-table tr {
    color: #fff;

    // background: #1e292b;
    background: #575757;
  }

  .cell {
    white-space: nowrap;
  }

  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border: 1px solid #6a6a6a;
    padding: 5px;
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background: #121d1f;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: rgba(255, 255, 255, 0.05);
  }
  .el-table__body tr.current-row > td {
    background-color: #15c0ff20 !important;
  }

  .el-scrollbar {
    // 横向滚动条
    .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
      opacity: 1; // 默认滚动条自带透明度
      height: 8px; // 横向滑块的宽度
      border-radius: 2px; // 圆角度数
      // background-color: rgba(136, 219, 255, 1); // 滑块背景色
      background-color: #3f474d; // 滑块背景色
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影
    }

    // 纵向滚动条
    .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
      opacity: 1;
      width: 8px; // 纵向滑块的宽度
      border-radius: 2px;
      // background-color: rgba(136, 219, 255, 1);
      background-color: #3f474d;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    }
  }
}
</style>
